<template>
<div class="ebook-slide-contents">
  <div class="slide-contents-search-wrapper">
    <div class="slide-contents-search-input-wrapper">
      <div class="slide-contents-search-icon">
        <span class="icon-search"></span>
      </div>
      <input type="text"
             class="slide-contents-search-input"
             @focus="showSearchPage"
             v-model="searchText"
             @keyup.enter.exact="search()"
             :placeholder="$t('book.searchHint')">
    </div>
    <div class="slide-contents-search-cancel"
         v-if="searchVisible"
         @click="hideSearchPage()"
    >{{$t('book.cancel')}}</div>
  </div>

  <div v-show="!searchVisible" class="slide-contents-book-wrapper">
    <div class="slide-contents-book-img-wrapper">
      <img :src="cover" class="slide-contents-book-img" />
    </div>
    <div class="slide-contents-book-info-wrapper">
      <div class="slide-contents-book-title" v-if="metadata">{{ metadata.title }}</div>
      <div class="slide-contents-book-author" v-if="metadata">{{ metadata.creator }}</div>
    </div>
    <div class="slide-contents-book-progress-wrapper">
      <div class="slide-contents-book-progress">
        <span class="progress">{{progress + '%'}}</span>
        <span class="progress-text">{{ $t('book.haveRead2') }}</span>
      </div>
      <div class="slide-contents-book-time">{{getReadTimeText()}}</div>
    </div>
  </div>
  <scroll v-show="!searchVisible" class="slide-contents-list" :top="156" :bottom="48" ref="scroll">
    <div class="slide-contents-item" v-for="(item, index) in navigation" :key="index"  :style="contentItemStyle(item)">
        <span class="slide-contents-item-label" :class="{'selected': section === index}"
              @click="displayContent(item.href)">{{item.label}}</span>
      <span class="slide-contents-item-page">{{item.page}}</span>
    </div>
  </scroll>
  <scroll class="slide-search-list"
          :top="66"
          :bottom="48"
          v-show="searchVisible">
    <div class="slide-search-item"
         v-for="(item, index) in searchList"
         :key="index"
         v-html="item.excerpt"
         @click="displayContent(item.cfi, true)"></div>
  </scroll>
</div>
</template>

<script type="text/ecmascript-6">
import Scroll from "@/components/common/Scroll";
import {ebookMixin} from '@/utils/mixin'
import { px2rem } from "@/utils/utils";

export default {
  mixins: [ebookMixin],
  name: "EbookSlideContents",
  components: {
    Scroll
  },
  data(){
    return{
      searchVisible: false,
      searchList: null,
      searchText: ''
    }
  },
  methods: {
    search(){
      if (this.searchText && this.searchText.length > 0){
        this.doSearch(this.searchText).then(res => {
          this.searchList = res
          console.log(res)
          this.searchList.map(item => {
            item.excerpt = item.excerpt.replace(this.searchText, `<span class="content-search-text">${this.searchText}</span>`)
          })
          console.log(res)
        })
      }
    },
    doSearch(q) {
      let that = this
      return Promise.all(
          that.currentBook.spine.spineItems.map(
              section => section.load(that.currentBook.load.bind(that.currentBook))
              .then(section.find.bind(section, q))
              .finally(section.unload.bind(section)))
      ).then(results => Promise.resolve([].concat.apply([], results)))
    },
    displayContent(target, highLight = false){
      this.display(target, ()=>{
        this.hideTitleAndMenu();
        if (highLight){
          this.currentBook.rendition.annotations.highlight(target)
        }
      })
    },
    contentItemStyle(item){
      return {
        marginLeft: `${px2rem(item.level *15)}rem`
      }
    },
    showSearchPage(){
      this.searchVisible = true
    },
    hideSearchPage(){
      this.searchVisible = false
      this.searchText = ''
      this.searchList = null
    }
  }
}
</script>

<style scoped lang="scss">
@import '~@/assets/styles/global';
.ebook-slide-contents{
  width: 100%;
  font-size: 0;
  .slide-contents-search-wrapper{
    display: flex;
    width: 100%;
    height: px2rem(36);
    margin: px2rem(20) 0 px2rem(10) 0;
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-contents-search-input-wrapper{
      flex: 1;
      @include center;
      .slide-contents-search-icon{
        flex: 0 0 px2rem(28);
        font-size: px2rem(12);
        @include center;
      }
      .slide-contents-search-input{
        flex: 1;
        width: 100%;
        font-size: px2rem(14);
        height: px2rem(32);
        background: transparent;
        border: none;
        &:focus{
          outline: none;
        }
      }
    }
    .slide-contents-search-cancel{
      flex: 0 0 px2rem(50);
      font-size: px2rem(14);
      @include center;
    }
  }
  .slide-contents-book-wrapper{
    display: flex;
    width: 100%;
    height: px2rem(90);
    padding: px2rem(10) px2rem(15) px2rem(20) px2rem(15);
    box-sizing: border-box;
    .slide-contents-book-img-wrapper{
      flex: 0 0 px2rem(45);
      .slide-contents-book-img{
        width: px2rem(45);
        height: px2rem(60);
      }
    }
    .slide-contents-book-info-wrapper{
      flex: 1;
      padding: 0 px2rem(10);
      box-sizing: border-box;
      .slide-contents-book-title{
        font-size: px2rem(14);
        width: px2rem(153.75);
        @include ellipsis2(2);
        line-height: px2rem(16);
      }
      .slide-contents-book-author{
        font-size: px2rem(12);
        width: px2rem(153.75);
        margin-top: px2rem(5);
        @include ellipsis;
      }
    }
  .slide-contents-book-progress-wrapper{
    flex: 0 0 px2rem(70);
    .slide-contents-book-progress{
      .progress{
        font-size: px2rem(14);
      }
      .progress-text{
        font-size: px2rem(12);
      }
    }
    .slide-contents-book-time{
      font-size: px2rem(12);
      margin-top: px2rem(5);
    }
  }}
  .slide-contents-list {
     padding: 0 px2rem(15);
     box-sizing: border-box;
     .slide-contents-item {
       display: flex;
       padding: px2rem(20) 0;
       box-sizing: border-box;
       .slide-contents-item-label {
         flex: 1;
         font-size: px2rem(14);
         line-height: px2rem(16);
         @include ellipsis;
       }
       .slide-contents-item-page {
         flex: 0 0 px2rem(30);
         font-size: px2rem(10);
         @include right;
       }
     }
   }
  .slide-search-list {
    width: 100%;
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-search-item {
      font-size: px2rem(14);
      line-height: px2rem(16);
      padding: px2rem(20) 0;
      box-sizing: border-box;
    }
  }
}
</style>
